/**
 * @this RXSeparator: form 的线
 *
 * @flow
 */
import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ViewPropTypes,
} from 'react-native'

import PropTypes from 'prop-types'

import FormStyle from './config/FormStyle'

export default class RXSeparator extends Component {
  static propTypes = {
    ...View.propTypes,
    type: PropTypes.oneOf(['none', 'full', 'indent']),
    lineStyle: ViewPropTypes.style,
  }

  static defaultProps = {
    ...View.defaultProps,
    type: 'full',
  }

  render() {
    let { style, type, lineStyle, ...others } = this.props

    switch (type) {
      case 'none':
        lineStyle = [{ height: 0 }].concat(lineStyle)
        break
      case 'full':
        lineStyle = [styles.separator].concat(lineStyle)
        break
      case 'indent':
        lineStyle = [styles.separator, {
          marginLeft: FormStyle.lineMarginLeft,
        }].concat(lineStyle)
        break
    }

    return (
      <View style={[styles.container].concat(style)}
        {...others} >
        <View style={lineStyle} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  separator: {
    backgroundColor: FormStyle.lineColor,
    height: FormStyle.lineHeight,
  }
})
